<template>
	<div class="graphicnavigationstyle">
		<h2>{{ datas.text }}</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容"
				><!-- 提示 -->

				<div class="decorate-card">
					<!-- 表单 -->
					<el-form label-width="100px">
						<div class="title">样式选择</div>
						<!-- 商品类型选择 -->
						<el-form-item label="菜单布局">
							<el-radio-group v-model="datas.layout">
								<el-radio :label="1" size="small">图片+文字</el-radio>
								<el-radio :label="2" size="small">图片</el-radio>
								<!-- <el-radio :label="2" size="small">文字</el-radio> -->
							</el-radio-group>
						</el-form-item>

						<el-form-item label="列数">
							<el-radio-group v-model="datas.col">
								<el-radio :label="3" size="small">3个</el-radio>
								<el-radio :label="4" size="small">4个</el-radio>
								<el-radio :label="5" size="small">5个</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="行数">
							<el-radio-group v-model="datas.row">
								<el-radio :label="1" size="small">1行</el-radio>
								<el-radio :label="2" size="small">2行</el-radio>
							</el-radio-group>
						</el-form-item>

						<div class="title">图片设置</div>
					</el-form>
				</div>
				<!-- 图片广告 -->

				<!-- <vuedraggable :list="datas.imageList" item-key="index" :forceFallback="true" :animation="200"> -->
				<!-- <template #item="{ element, index }"> -->
				<section class="imgList" v-for="(item, index) in datas.list" :key="index">
					<el-form-item label="图标">
						<div class="sd-flex">
							<div class="choice-image choice-image-delete" @click="choiceFileImage(index)">
								<el-image v-if="item.src != ''" :src="STATIC_URL + item.src" fit="cover" />
								<el-icon v-else>
									<ele-Plus />
								</el-icon>

								<div class="delete-content" @click.stop="item.src = ''" v-if="item.src != ''">
									<SvgIcon name="ele-DeleteFilled"></SvgIcon>
								</div>
							</div>
							<div class="ml10 tip">建议尺寸：98*98</div>
						</div>
					</el-form-item>
					<el-form-item label="标题">
						<el-input v-model="item.title.text">
							<template #prepend>
								<el-color-picker v-model="item.title.color" />
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="链接">
						<el-input v-model="item.url">
							<template #append> <el-button class="ml5 mr5" @click="openChoiceData(index)">选择</el-button> </template>
						</el-input>
					</el-form-item>

					<el-form-item label="标签">
						<el-switch v-model="item.badge.show" active-value="1" inactive-value="0" />
					</el-form-item>

					<el-form-item label="标签内容" v-if="item.badge.show == 1">
						<el-input v-model="item.badge.text">
							<template #append>
								<el-color-picker v-model="item.badge.color" />
							</template>
						</el-input>
					</el-form-item>

					<el-form-item label="标签背景" v-if="item.badge.show == 1">
						<el-input v-model="item.badge.bgColor">
							<template #append>
								<el-color-picker v-model="item.badge.bgColor" />
							</template>
						</el-input>
					</el-form-item>
					<van-icon class="el-icon-circle-close" name="close" @click="deleteNva(index)" />
				</section>
				<!-- </template> -->
				<!-- </vuedraggable> -->

				<!-- 上传图片 -->
				<el-button @click="addNav" class="mb20">添加导航</el-button>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>
		<!-- 标题 -->
		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
		<PageData ref="PageDataRef" @choice="choicePage"></PageData>
	</div>
</template>

<script setup name="graphicnavigationstyle">
import { STATIC_URL } from '/@/utils/config';
import { defineAsyncComponent, ref } from 'vue';

const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const FileChoiceRef = ref();
const DataStyle = defineAsyncComponent(() => import('/@/components/decorate/components/rightslider/style/index.vue'));

const StyleComponentData = defineAsyncComponent(() => import('/@/components/decorate/components/rightslider/style/data.vue'));

const PageData = defineAsyncComponent(() => import('/@/views/shop/data/page/choice/index.vue'));

const PageDataRef = ref();
const props = defineProps({
	datas: {},
});

let imageIndex = -1;
const addNav = () => {
	console.log('datas.list: ', props.datas.list.length);
	props.datas.list.push({
		src: '',
		title: {
			text: '',
			color: '',
		},
		tip: {
			text: '',
			color: '#bbb',
		},
		url: '',
		badge: {
			show: 0,
			text: '',
			color: 'FFFFFF',
			bgColor: '#97420F',
		},
	});
};

const deleteNva = (index) => {
	props.datas.list.splice(index, 1);
};

const choiceFileImage = (index) => {
	imageIndex = index;
	FileChoiceRef.value.openFileChoiceDialog();
};

const choiceFile = (res) => {
	props.datas.list[imageIndex].src = res[0].visitRelativePath;
};

let choicePageIndex = 0;
const openChoiceData = (index) => {
	PageDataRef.value.openDialog();
	choicePageIndex = index;
};

const choicePage = (res) => {
	console.log('choice page res: ', res);
	props.datas.list[choicePageIndex].url = res.urlContent;
};
</script>

<style scoped lang="scss">
.graphicnavigationstyle {
	// width: 100%;
	// position: absolute;
	// left: 0;
	// top: 0;
	// padding: 0 10px 20px;
	box-sizing: border-box;

	.imgList:hover {
		.el-icon-circle-close {
			display: block;
		}
	}
	.imgList {
		padding: 6px 12px;
		margin: 16px 7px;
		border-radius: 2px;
		background-color: #fff;
		box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);

		position: relative;

		/* 删除图标 */
		.el-icon-circle-close {
			position: absolute;
			right: -8px;
			top: -10px;
			cursor: pointer;
			font-size: 19px;
			z-index: 10000;
			display: none;
		}

		/* 图片 */
		.imag {
			width: 60px;
			height: 60px;
			border-radius: 5px;
			overflow: hidden;
			position: relative;
			cursor: pointer;
			img {
				width: 100%;
				height: 100%;
				display: inline-block;
			}
			span {
				background: rgba(0, 0, 0, 0.5);
				font-size: 12px;
				position: absolute;
				left: 0px;
				bottom: 0px;
				display: inline-block;
				width: 100%;
				text-align: center;
				color: #fff;
				height: 20px;
				line-height: 20px;
			}
		}

		/* 图片字 */
		.imgText {
			width: 80%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding-left: 20px;
			justify-content: space-between;
			.select-type {
				display: flex;
				:deep(.el-select) {
					.el-input {
						input {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}
}
.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}
	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}

:deep(.el-color-picker__trigger) {
	padding: 0px;
}

:deep(.el-color-picker__color) {
	border: 0px;
}

:deep(.el-input-group__append) {
	padding: 0px !important;
}
</style>
